<!--  服务区域——选择地址 -->
<template>
	<view>
		<block v-if="lat == '' && lng == ''">
			<image :src="address2" style="width: 750rpx;height: 750rpx;"></image>
			<view class="aa2">请打开定位</view>
		</block>
		<block v-else>
			<view>
				<view class="page-section page-section-gap" @click="handleLogin()">
					<map style="width: 100%; height: 300px;" :latitude="lat" :longitude="lng" :markers="list">
						<cover-view slot="callout">
							<block v-for="(item, index) in list" :key="index">
								<cover-view class="customCallout" :marker-id="item.id">
									<cover-view class="content">{{ item.store_name }}</cover-view>
								</cover-view>
							</block>
						</cover-view>
					</map>
				</view>
				<view style="padding-top:26rpx;">
					<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
						<block v-for="(item, index) in list" :key="index">
							<view style="width: 100%;" class="flex">
								<view class="store" @click="address(item)">
									<view class="flex-between">
										<view class="lickName flex-align-center">
											<image :src="item.store_logo"></image>
											<view class="font-overflow">{{ item.store_name }}</view>
										</view>
										<view class="km flex-align-center">距我{{ item.juli }}KM</view>
									</view>
									<view style="display: flex;">
										<view class="text font-overflow2" style="margin:8rpx 24rpx 28rpx;">
											<span class="aa">地址：</span>
											{{ item.store_addres }}
										</view>
									</view>
									<view class="flex-between" style="margin:0rpx 24rpx;padding-bottom: 22rpx;">
										<view class="text flex-align-center">
											<view>电话：</view>
											<view>{{ item.store_phone }}</view>
										</view>
										<view class="navigation flex">
											<text class="iconfont icon-daohang" style="color: #689CEB;margin-right: 10rpx;"></text>
											<view>导航</view>
										</view>
									</view>
								</view>
							</view>
						</block>
					</mescroll-body>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
export default {
	components: {
		
	},
	data() {
		return {
			index: '',
			menkey: '',
			address2: this.$img.address2,
			optEmpty: {
				tip: '未获取到当前位置'
			},
			list: [],
			logo: this.$img.logo,
			id: 0,
			// 使用 marker点击事件 需要填写id
			title: 'map',
			lat: '',
			lng: '',
			aa: '',
			bb: '',
			covers: [
				// 当前经纬度和图片
				{
					latitude: uni.getStorageSync('lat'),
					longitude: uni.getStorageSync('lng'),
					iconPath: uni.getStorageSync('userInfo').avatarUrl,
					height: 40,
					width: 40
				}
			]
		};
	},
	onLoad(options) {
		this.options = options;
	},
	onShow() {
		this.getSystem();
		this.getAuthorizeInfo();
		this.uid = uni.getStorageSync('userId').id;
	},
	methods: {
		maps() {
			uni.chooseLocation({
				success: res => {
					this.lat = res.latitude;
					this.lng = res.longitude;
					this.address = res.name;
					this.upCallback();
				},
				fail: res => {
					// 拒绝授权
					this.maps();
				}
			});
		},
		// 系统设置接口
		async getSystem() {
			const systemInfo = await this.$http({
				url: this.$api.system
			});
			if (systemInfo.errno == 0) {
				this.menkey = systemInfo.data.qqmap_key;
				// 判断是否宝付支付 为3 则是pay_config1---pay_type  商户支付 2 服务商支付 3 宝付支付（第三方 ）
				this.collectionCode = systemInfo.data.pay_config.pay_type;
				wx.setStorageSync('collectionCode', this.collectionCode); 
				// 后台返回的限时范围 传入的单位是米
				this.distance_limit = Number(systemInfo.data.distance_limit) / 1000;
			}
		},
		// 附近门店
		async upCallback(scroll) {
			const result = await this.$http({
				url: this.$api.store,
				data: {
					page: scroll.num,
					psize: 10,
					uid: uni.getStorageSync('userId'),
					lat: this.lat,
					lng: this.lng,
					distance: this.distance_limit
				}
			});
			if (result.errno == 0) {
				this.mescroll.endByPage(result.data.list.length, result.totalPage);
				if (scroll.num == 1) this.list = [];
				this.list = this.list.concat(result.data.list);
				// 修改
				for (let i = 0; i < this.list.length; i++) {
					this.$set(this.list[i], 'latitude', this.list[i].store_addres_lat);
					this.$set(this.list[i], 'longitude', this.list[i].store_addres_lng);
					this.$set(this.list[i], 'iconPath', this.list[i].store_logo);
					this.$set(this.list[i], 'height', 34);
					this.$set(this.list[i], 'width', 34);
					this.$set(this.list[i], 'title', this.list[i].store_name);
				}
			} else {
				this.list = '';
			}
		},
		// 判断登录事件
		handleLogin() {
			if (this.uid) {
				return true;
			} else {
				uni.navigateTo({
					url: '/wjyk_nhyk/pages/login/login'
				});
			}
		},
		// （获取当前位置）
		getAuthorizeInfo() {
			const that = this;
			uni.authorize({
				scope: 'scope.userLocation',
				success() {
					// 允许授权
					that.getLocations();
					that.upCallback();
				},
				fail() {
					// 拒绝授权
					that.openConfirm();
				}
			});
		},
		//获得地理位置经纬度
		getLocations() {
			uni.getLocation({
				// 将wgs84 改为 gcj02  h5提高精确度
				type: 'gcj02',
				//  geocode: true,   address：地址信息（仅App端支持，需配置geocode为true）
				success: res => {
					this.lat = res.latitude;
					this.lng = res.longitude;
					// 获取当前经纬度  存缓存  在计算差距离的时候 调用
					wx.setStorageSync('lat', this.lat);
					wx.setStorageSync('lng', this.lng);
					this.upCallback();
				},
				fail: res => {
					this.lat = res.latitude;
					this.lng = res.longitude;
				}
			});
		},
		// 当用户第一次拒绝后再次请求授权
		openConfirm() {
			uni.showModal({
				title: '请求授权当前位置',
				content: '需要获取您的地理位置，请确认授权',
				success: res => {
					this.upCallback();
					if (res.confirm) {
						this.upCallback();
						uni.openSetting(); // 打开地图权限设置
					} else if (res.cancel) {
						uni.showToast({
							title: '你拒绝了授权，无法获得周边信息',
							icon: 'none',
							duration: 10
						});
						this.$sun.toast('定位失败');
					}
				}
			});
		},
		// 点击导航调用
		async address(tiem) {
			//纬度
			var latitude = parseFloat(tiem.store_addres_lat);
			//经度
			var longitude = parseFloat(tiem.store_addres_lng);
			// 百度地图经纬度转腾讯地图经纬度
			var x_pi = 3.14159265358979324;
			var x = parseFloat(tiem.store_addres_lat) - 0.0065;
			var y = parseFloat(tiem.store_addres_lng) - 0.006;
			var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
			var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
			var lat = (z * Math.cos(theta)).toFixed(7);
			var lng = (z * Math.sin(theta)).toFixed(7);
			//定位地方名称
			var name = tiem.store_name;
			const map = await this.$sun.openLocation({
				//拿到上面的计算好的（百度经纬度转腾讯经纬度）经纬度 进行一个赋值
				lat: lat,
				lng: lng,
				name: tiem.store_name,
				address: tiem.store_addres,
				key: this.menkey
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f8f8f8;
}
.customCallout {
	box-sizing: border-box;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 30px;
	width: 150px;
	height: 40px;
	display: inline-flex;
	padding: 5px 20px;
	justify-content: center;
	align-items: center;
}
.store {
	width: 682rpx;
	background-color: #ffffff;
	border-radius: 12rpx;
	margin-bottom: 26rpx;
}
.lickName {
	image {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		margin: 20rpx;
	}
	view {
		font-size: 32rpx;
		display: inline-block;
		font-weight: bold;
	}
}
.aa2 {
	font-size: 34rpx;
	color: #666;
	text-align: center;
	margin-top: 20rpx;
}
.refresh {
	background-color: #f0ad4e;
	padding: 10rpx 20rpx;
	border-radius: 20rpx;
}
.km {
	background-color: #6b8ad3;
	height: auto;
	display: inline-block;
	color: #ffffff;
	font-size: 24rpx;
	padding: 6rpx;
}
.text {
	font-size: 28rpx;
	text-align: left;
}
.aa {
	width: 110rpx;
}
.navigation {
	width: 128rpx;
	height: 54rpx;
	border: 2rpx solid #6ba6ff;
	border-radius: 60rpx;
	image {
		width: 28rpx;
		height: 28rpx;
		margin-right: 10rpx;
	}
	view {
		color: #689ceb;
		font-size: 24rpx;
		margin: 10rpx 0rpx;
	}
}
</style>
